<template>
	<div id="login">
		<div class="loginBox">
			<div class="log">
				<div class="logImg"></div>
				<div class="logtitle">小青益学习中心</div>
			</div>
			<div class="loginInput">
				<el-input prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="user.username" clearable></el-input>
				<el-input prefix-icon="el-icon-edit" placeholder="请输入密码" v-model="user.password" show-password></el-input>
				<el-button type="primary" style="font-size: 18px;" @click="login">
					登 录
					<i style="margin-left: 20px;font-size: 18px;" class="el-icon-right">
				</i></el-button>
			</div>
			<div class="manyOptions">
				<a href="void:" @click="editPass">忘记密码</a> 
				| <a href="void:" @click="register">注册</a>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				user:{
					username:'',
					password:''
				}
			}
		},
		methods:{
			login(){
				// this.$request({
				// 	method:'post',
				// 	url:'',
				// 	data:this.user
				// }).then(res=>{
					
				// }).catch(err=>{
					
				// })
				localStorage.setItem('username','coderZT');
				this.$router.push('/index');
			},
			editPass(){
				this.$message('牛逼')
			},
			register(){
				this.$router.push('/register')
			}
		}
	}
</script>

<style scoped="scoped">
	#login{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
		background:linear-gradient(white,lightblue,skyblue);
	}
	.loginBox{
		width: 400px;
		height: 400px;
		background: rgba(0,0,0,0.1);
	}
	.log{
		display: flex;
		flex-direction: row;
		justify-content: center;
		height: 80px;
		margin-bottom: 20px;
		margin-top: 30px;
	}
	.logImg{
		width: 30%;
		height: 60px;
		padding-top: 10px;
		padding-bottom: 10px;
		background: url(../assets/logo.png) no-repeat 0 0;
		background-size: contain;
	}
	.logtitle{
		width: 55%;
		line-height: 80px;
		text-align: left;
		font-size: 30px;
		color: #FFFFFF;
	}
	.loginInput{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 80%;
		padding-left: 10%;
	}
	.loginInput .el-input:nth-child(2){
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.manyOptions{
		height: 100px;
		text-align: center;
		line-height: 100px;
	}
</style>
